<!--
- File:    收货地址列表.
-->
<template>
  <div>
    <div class="Web_Box">
      <div class="detail f24" v-for="(item, index) in addressList.data">
        <div @click="selectAddress(item.address_id)">
          <div class="clear p20 f24 cr_4e4e4e">
            <span class="slhblock slh">{{item.true_name}}</span><span class="fr">{{item.mob_phone}}</span>
          </div>
          <div class=" slh2  hidden pl20 pr20">
            {{item.area_info}} {{item.address}}
          </div>
        </div>
        <div class="detail_sel f-cb p20 cr_999">
          <div v-show="item.is_default == '1'" class="fl select_b cr_45a73a">
            <i class="iconfont icon-pitchon2 "></i>
            <span class="pl5">默认地址</span>
          </div>
          <div v-show="item.is_default == '0'" class="fl select_b" @click="setDefaultAddress(item.address_id)">
            <i class="iconfont icon-pitch2"></i>
            <span class="pl5">设为默认</span>
          </div>
          <div class="fr detail_icon">
            <span @click="editAddress(item.address_id)">
              <i class="iconfont icon-bianji"></i>
              <span class="pr30 pl5">编辑</span>
            </span>
            <span class="delete" @click="delAddress(item.address_id, index)">
              <i class="iconfont icon-del3 pr5"></i>
              <span>删除</span>
            </span>
          </div>
        </div>
      </div>
    </div>
    <empty-data :show="addressList.requested && addressList.data.length <= 0"></empty-data>
    <div class="BottomGd">
      <router-link :to="{name: 'address-add'}">
        <span class="but_2 wauto disb tc">+添加新地址</span>
      </router-link>
    </div>
    <back-nav></back-nav>
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({addressList: 'addressList'}),
      mapRules({once: 'addressList'})
    ],
    data() {
      return {
        from: this.$route.query.from || ''
      }
    },
    components: {},
    created() {
    },
    methods: {
      selectAddress(id) {
        if (this.from == 'order-confirm') {  // 下单页跳进该页面时,可选择地址, 个人中心页跳进来时,点击地址无操作
          this.$router.replace({
            name: 'order-confirm',
            query: {cart: this.$route.query.cart, type: this.$route.query.type, addressId: id}
          })
        } else if (this.from == 'order-rent-confirm') {
          this.$router.replace({
            name: 'order-rent-confirm',
            query: {cart: this.$route.query.cart, type: this.$route.query.type, addressId: id}
          })
        } else {
          return
        }
      },
      setDefaultAddress(id) {
        this.$request.setDefaultAddress(id).then(data => {
          for (let i = 0; i < this.addressList.data.length; i++) {
            if (this.addressList.data[i].address_id === id) {
              this.addressList.data[i].is_default = '1'
            } else {
              this.addressList.data[i].is_default = '0'
            }
          }
        })
      },
      delAddress(id, index) {
        this.$messageBox.confirm(`你确定要删除吗?`).then(action => {
          this.$request.delAddress(id).then(data => {
            this.addressList.data.splice(index, 1)
            this.$toast('删除成功')
          }).catch(e => {
            console.error('删除地址失败', e)
            this.$toast('删除失败:' + e.msg)
          })
        }).catch(() => {
        })
      },
      editAddress(id) {
        this.$router.push({name: 'address-edit', params: {id: id}})
      }
    }
  }
</script>

<style>

</style>
